<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../img/asset-favico.ico">
    <title>编辑信息</title>

    <link rel="stylesheet" href="../css/page-health-orderInfo.css" />

    <script src="../js/axios-0.18.0.js"></script>
    <script src="../js/vue.js"></script>
</head>

<body data-spy="scroll" data-target="#myNavbar" data-offset="150">
    <div id="app">
        <!-- 页面头部 -->
        <div class="top-header">
            <span class="f-left" onclick="goBack()"><i class="icon-back"></i>返回</span>
            <span class="center">千锋健康</span>
            <span class="f-right"><i class="icon-more"></i></span>
        </div>
        <!-- 页面内容 -->
        <div class="contentBox">
            <div class="card">
                <div class="project-img">
                    <img :src="'http://localhost:8081/setmeal/img?name=' + setmeal.img" width="100%" height="100%">
                </div>
                <div class="project-text">
                    <h4 class="tit">{{setmeal.name}}</h4>
                    <p class="subtit">该套餐共{{ItemCount}}项检查项</p>
                    <p class="keywords">
                        <span v-if="setmeal.sex == 0">男女通用</span>
                        <span v-if="setmeal.sex == 1">男</span>
                        <span v-if="setmeal.sex == 2">女</span>
                        <span>{{setmeal.age}}</span></p>
                </div>
                <div class="project-know">
                    <a href="health-orderNotice.html" class="link-page">
            <i class="icon-ask-circle"><span class="path1"></span><span class="path2"></span></i>
            <span class="word">预约须知</span>
            <span class="arrow"><i class="icon-rit-arrow"></i></span>
        </a>
                </div>
            </div>
            <div class="form-info">
                <div class="info-title">
                    <span class="name">体检人信息</span>
                </div>
                <form class="input-group info-form">
                    <div class="input-row">
                        <label>体检人</label>
                        <input type="text" v-model="appointment.name" class="input-clear" placeholder="请输入用户名">
                    </div>
                    <div class="input-row single-radio">
                        <label class="radio-title">性别</label>
                        <div class="radio-list">
                            <div class="radio">
                                <input id="item1" v-model="appointment.sex" type="radio" name="sex" value="1" checked>
                                <label for="item1"></label>
                                <span>男</span>
                            </div>
                            <div class="radio">
                                <input id="item2" v-model="appointment.sex" type="radio" name="sex" value="2">
                                <label for="item2"></label>
                                <span>女</span>
                            </div>
                        </div>
                    </div>

                    <div class="input-row">
                        <label>手机号</label>
                        <input type="text" v-model="appointment.phone" class="input-clear" placeholder="请输入手机号">
                    </div>
                    <div class="input-row">
                        <label>身份证号</label>
                        <input type="text" v-model="appointment.idcard" class="input-clear" placeholder="请输入身份证号">
                    </div>
                    <div class="input-row">
                        <label>出生日期</label>
                        <input type="date" v-model="appointment.birthday" class="input-clear" placeholder="请输入出生日期">
                    </div>
                    <div class="input-row single-radio">
                        <label class="radio-title" >婚否</label>
                        <div class="radio-list">
                            <div class="radio">
                                <input id="item3" v-model="appointment.maritalStatus" type="radio" name="marry" value="1" checked>
                                <label for="item3"></label>
                                <span>已婚</span>
                            </div>
                            <div class="radio">
                                <input id="item4" v-model="appointment.maritalStatus" type="radio" name="marry" value="0">
                                <label for="item4"></label>
                                <span>未婚</span>
                            </div>
                        </div>

                    </div>

                    <div>
                        <label>体检日期选择</label>
                        <input v-model="appointment.healthDate" type="date">
                    </div>

                </form>
                <div class="box-button">
                    <button type="button" @click="judgmentFormat()" class="btn order-btn">提交预约</button>
                </div>
            </div>

        </div>
    </div>

    <script src="../plugins/datapicker/datePicker.js"></script>

<script>
    function getUrlParams (name) {
        let url = window.location.href;
        let tstr = url.substring(url.indexOf('?') + 1).split('&');
        let result = {};
        tstr.forEach((item) => {
            let res = item.split('=');
            result[res[0]] = res[1];
        });
        return result[name];
    };

    let sid = getUrlParams("sid");
    new Vue({
        el:"#app",
        data:{
            sid:sid,
            ItemCount:"",
            setmeal:{

            },
            appointment:{
                sid:sid,
                name:"",
                sex:"",
                phone:"",
                idcard:"",
                birthday:"",
                maritalStatus:"",
                healthDate:"",
                setmealId:""
            }
        },
        methods:{
            findSetmeal(){
                let token = localStorage.getItem("security_token");
                if (!token){
                    token = "";
                }
                axios({
                    url:`http://localhost:8081/setmeal/${sid}`,
                    method:"GET",
                    headers:{
                        token:token
                    }
                }).then(resp=>{
                    let r = resp.data;
                    if (r.code == 200){
                        this.setmeal = r.data.setmeal;
                        this.appointment.setmealId = r.data.setmeal.id;
                        this.ItemCount = r.data.itemCount;
                    }else if (r.data == 401){
                        alert(r.message)
                    }
                })
            },
            addAppointment(){
                let token = localStorage.getItem("security_token");
                if (!token){
                    token = "";
                }
                axios({
                    url:"http://localhost:8081/order",
                    method:"POST",
                    headers:{
                        token:token
                    },
                    data:this.appointment
                }).then(resp=>{
                    let r = resp.data;
                    if (r.code == 200){
                        let r = resp.data;
                        alert("预约成功")
                        location.href = "health-index.html";
                    }else if (r.data == 401){
                        alert(r.message)
                    }else {
                        alert(r.message)
                    }
                })
            },
            getNowDate(){
                var year = new Date().getFullYear();  // 获取当前年
                var month = (new Date().getMonth()) + 1;   // 获取当前月
                var day = new Date().getDate();   // 获取当前日
                return year + "-" + month + "-" + day;
            },
            judgmentDate(){
                let nowDate1 = this.getNowDate();
                let nowDate = new Date(nowDate1);

                let healthDate1 = this.appointment.healthDate;
                let healthDate = new Date(healthDate1);

                let bir1 = this.appointment.birthday;
                let bir = new Date(bir1);

                if (bir > nowDate){
                    alert("请重新填写生日")
                }else {
                    if (nowDate > healthDate){
                        alert("请重新选择预约日期");
                    }else {
                        this.judgmentNumber(healthDate1);
                    }
                }
            },
            judgmentFormat(){
                let phoneReg = /^1[3456789]\d{9}$/;
                let idCardReg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;

                let p = this.appointment.phone;
                let c = this.appointment.idcard;

                let flagPhone = phoneReg.test(p);
                let flagCard = idCardReg.test(c);
                if (!flagPhone){
                    alert("手机号格式错误")
                }else if (!flagCard){
                    alert("身份证格式错误")
                }else {
                    this.judgmentDate();
                }
            },
            judgmentNumber(healthDate1){
                let token = localStorage.getItem("security_token");
                if (!token){
                    token = "";
                }
                axios({
                    url:`http://localhost:8081/orderSetting/${healthDate1}`,
                    method:"GET",
                    headers:{
                        token:token
                    },
                }).then(resp=>{
                    let r = resp.data;
                    if (r.code == 200){
                        let r = resp.data;
                        this.addAppointment();
                    }else if (r.data == 401){
                        alert(r.message)
                    }else {
                        alert(r.message)
                    }
                })
            }
        },
        mounted(){
            this.findSetmeal();
        }
    })
    function goBack() {
        window.history.back();
    }
</script>
</body>
